<!DOCTYPE html>
<html lang="en">
{{include 'admin/public/header.html'}}

<body>
  {{include 'admin/public/nav_top.html'}}

  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

  <div class="main-container" id="main-container">
    <script type="text/javascript">
      try {
        ace.settings.check('main-container', 'fixed')
      } catch (e) {}
    </script>

    <div class="main-container-inner">
      <a class="menu-toggler" id="menu-toggler" href="#">
        <span class="menu-text"></span>
      </a>

      {{include 'admin/public/nav_left'}}

      <div class="main-content">
        <div class="breadcrumbs" id="breadcrumbs">
          <script type="text/javascript">
            try {
              ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {}
          </script>

          <ul class="breadcrumb">
            <li>
              <i class="icon-home home-icon"></i>
              <a href="#">首页</a>
            </li>
            <li class="active">控制台</li>
          </ul><!-- .breadcrumb -->

          <div class="nav-search" id="nav-search">
            <form class="form-search">
              <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                  autocomplete="off" />
                <i class="icon-search nav-search-icon"></i>
              </span>
            </form>
          </div><!-- #nav-search -->
        </div>

        <div class="page-content">

          <div class="page-header">
            <h1>
              添加文章
            </h1>
          </div>

          <!-- <form class="form-horizontal" enctype="multipart/form-data" role="form"
            action="{{__HOST__}}/admin/article/doAddArticle" method="POST">

            <div class="form-group">
							<label class="col-sm-2 control-label no-padding-right" for="articleTitle">文章题目:</label>
							<div class="col-sm-10">
								<input type="text" id="title" name="articleTitle">
							</div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right" for="title">上传图片:</label>
              <div class="col-sm-6">
                <input type="file" name="pic" id="file" style="width: 100%;" class="col-xs-10 col-sm-5">
              </div>
            </div>
            <div class="form-group">
							<label class="col-sm-2 control-label no-padding-right" for="articleKeyWords">文章关键字:</label>
							<div class="col-sm-10">
								<input type="text" id="keywords" name="articleKeyWords">
							</div>
            </div>
            <div class="form-group">
							<label class="col-sm-2 control-label no-padding-right" for="description">文章详情:</label>

							<div class="col-sm-10">
								<script id="editor" type="text/plain" style="width:600px;height:300px;"></script>
							</div>
						</div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">添加</button>
              </div>
            </div>
          </form> -->
          <form action="{{__HOST__}}/admin/article/doAddArticle" method="post" class="form-horizontal"
            enctype="multipart/form-data" style="border:1px solid #eee;">


            <ul id="myTab" class="nav nav-tabs" style="height:44px;">
              <li class="active">
                <a href="#basic" data-toggle="tab">
                  基本设置
                </a>
              </li>
              <li><a href="#content" data-toggle="tab">内容设置</a></li>

              <li><a href="#seo" data-toggle="tab">SEO设置</a></li>

            </ul>
            <div id="myTabContent" class="tab-content" style="border: none;">
              <div class="tab-pane fade in active" id="basic">
                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right" for="pid">所属分类：</label>

                  <div class="col-sm-10">
                    <select name="pid" id="pid">
                      {{each catelist}}
                      <option value="{{@$value._id}}">{{$value.title}}</option>

                      {{each $value.list}}
                      <option value="{{@$value._id}}">　　　{{$value.title}}</option>
                      {{/each}}
                      {{/each}}

                    </select>
                  </div>
                  <input type="hidden" name="catename" id="catename" value="{{catelist[0].title}}" />
                </div>


                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right" for="title">名称:</label>

                  <div class="col-sm-10">
                    <input type="text" id="title" name="title" class="col-xs-10 col-sm-5" />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right" for="title">封面图:</label>

                  <div class="col-sm-10">
                    <input type="file" id="file" name="img_url" class="col-xs-10 col-sm-5" />
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right" for="title">作者:</label>

                  <div class="col-sm-10">
                    <input type="text" id="author" name="author" class="col-xs-10 col-sm-5" />
                  </div>
                </div>



                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right">状态：</label>
                  <div class="col-sm-10">
                    <label for="status1">已审核：</label><input type="radio" name="status" id="status1" value="1" checked />
                    &nbsp;
                    <label for="status2">未审核:</label><input type="radio" name="status" id="status2" value="0" />
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right">加入推荐：</label>
                  <div class="col-sm-10">
                    <input type="checkbox" value="1" name="is_best" checked=""> 精品
                    <input type="checkbox" value="1" name="is_hot" checked=""> 热销
                    <input type="checkbox" value="1" name="is_new" checked=""> 新品
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="content">
                <div class="form-group" style="height: 400px;">
                  <label class="col-sm-2 control-label no-padding-right">文章详情:</label>

                  <div class="col-sm-10">
                    <script name="content" id="editor" type="text/plain" style="width:600px;height:300px;"></script>
                  </div>
                </div>
              </div>
              <div class="tab-pane fade" id="seo">
                <div class="form-group">
                  <label class="col-sm-2 control-label no-padding-right" for="keywords">关键字：</label>

                  <div class="col-sm-10">
                    <input type="text" id="keywords" name="keywords" class="col-xs-10 col-sm-5" />
                  </div>
                </div>
                <div class="form-group" style="height:100px;">
                  <label class="col-sm-2 control-label no-padding-right" for="description">描述：</label>
                  <div class="col-sm-10">
                    <textarea style="height:100px;" class="col-xs-10 col-sm-5" name="description" id="description"
                      cols="10" rows="10"></textarea>
                  </div>
                </div>
              </div>
            </div>



            <div class="form-group">
              <label class="col-sm-2 control-label no-padding-right"></label>

              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
              </div>

            </div>


          </form>
        </div>
      </div><!-- /.main-content -->

    </div><!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
      <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
  </div><!-- /.main-container -->


  <!--[if !IE]> -->

  <script type="text/javascript">
    window.jQuery || document.write("<script src='{{__HOST__}}/admin/js/jquery-2.0.3.min.js'>" + "<" + "script>");
  </script>

  <!-- <![endif]-->
  <script>
    var ue = UE.getEditor('editor');
  </script>

  <script type="text/javascript">
    if ("ontouchend" in document) document.write("<script src='{{__HOST__}}/admin/js/jquery.mobile.custom.min.js'>" +
      "<" + "script>");
  </script>
  <script src="{{__HOST__}}/admin/js/bootstrap.min.js"></script>



  <script src="{{__HOST__}}/admin/js/typeahead-bs2.min.js"></script>


  <script src="{{__HOST__}}/admin/js/bootstrap-wysiwyg.min.js"></script>

  <!-- ace scripts -->

  <script src="{{__HOST__}}/admin/js/ace-elements.min.js"></script>
  <script src="{{__HOST__}}/admin/js/ace.min.js"></script>




  <script type="text/javascript">
    $(function () {
      // 表单验证
      // 非空校验方法
      function inputIsEmpty($input, className) {
        $input.blur(function () {
          let inputValue = $input.val()
          console.log(inputValue)
          if (inputValue.length == 0) {
            $(className).removeClass("error-hiden")
          } else {
            $(className).addClass("error-hiden")
          }
        })
      }
      inputIsEmpty($("#title"), ".title-error")
      inputIsEmpty($("#keywords"), ".keywords-error")
      inputIsEmpty($("#description"), ".description-error")

      //分类改变的时候  把分类的名称赋值给隐藏的表单域

      var pidDom = document.getElementById('pid');
      var catenameDom = document.getElementById('catename');
      var options = pidDom.getElementsByTagName('option');

      pidDom.onchange = function () {
        //分类改变的时候 获取选中的值 赋值给  catename
        for (var i = 0; i < options.length; i++) {
          if (options[i].selected) {
            catenameDom.value = options[i].innerHTML.trim();
          }
        }

      }
    })
  </script>

</body>

</html>